<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>收银端</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<style>
	html,body{height:100%;}
	
	/*-- 顶部内容 --*/
	.ding_box{position:relative;}
	.ding_box img{width:100%;}
	.ding_box>div{position:absolute;width:200px;left:calc(50% - 100px);height:178px;top:calc(50% - 89px);}
	.ding_box>div>p:nth-of-type(1){line-height:30px;text-align:center;font-size:18px;}
	.ding_box>div>p:nth-of-type(2){line-height:24px;text-align:center;font-size:12px;}
	.ding_box>div>p:nth-of-type(3){line-height:24px;text-align:center;font-size:12px;color:#fff;}
	.ding_box>div>div{width:100px;height:100px;margin:0 auto;}
	/*-- 顶部内容 --*/
	/*-- 底部内容 --*/
	.cashier_cont{margin-top:20px;padding-bottom:20px;}
	.cashier_cont>div{height:30px;position:relative;width:140px;margin:0 auto;}
	.cashier_cont>div>div{position:absolute;height:2px;width:100%;left:0;top:14px;background-color:#d7d7d7;}
	.cashier_cont>div>p{position:absolute;line-height:30px;height:30px;width:74px;background-color:#fff;left:calc(50% - 37px);top:0;text-align:center;color:#8e8f91;}
	
	.cashier_cont>ul{padding:0 30px;}
	.cashier_cont>ul>li{text-align:center;color:#333;margin-bottom:10px;}
	.cashier_cont>ul>li>p:nth-of-type(1){float:left;width:68px;font-size:12px;line-height:18px;}
	.cashier_cont>ul>li>p:nth-of-type(2){float:left;width:calc(100% - 74px);font-size:12px;line-height:36px;margin-left:6px;}
	.cashier_cont>ul>li:nth-of-type(2n+1) >p:nth-of-type(2){background-color:#d6eafc;}
	.cashier_cont>ul>li:nth-of-type(2n) >p:nth-of-type(2){background-color:#edf6fe;}
	/*-- 底部内容 --*/
</style>
</head>

<body>
	<!-- 顶部内容 -->
	<div class="ding_box">
		<img src="__HOME__/img/ding_bgimg.png" alt="">
		<div>
			<p>张某某</p>
			<p>NO:02156789</p>
			<div><img src="__HOME__/img/erweima.jpg" alt=""></div>
			<p>晋何辣妹子火锅</p>
		</div>
	</div>
	<!-- 顶部内容 -->
	<!-- 底部内容 -->
	<div class="cashier_cont">
		<div>
			<div></div>
			<p>明细</p>
		</div>
		<ul>
			<li>
				<p>2018-03-06<br>13:54</p>
				<p>某某某支付69元已到账</p>
				<h6 class="clearfix"></h6>
			</li>
			<li>
				<p>2018-03-06<br>13:54</p>
				<p>某某某支付69元已到账</p>
				<h6 class="clearfix"></h6>
			</li>
			<li>
				<p>2018-03-06<br>13:54</p>
				<p>某某某支付69元已到账</p>
				<h6 class="clearfix"></h6>
			</li>
			<li>
				<p>2018-03-06<br>13:54</p>
				<p>某某某支付69元已到账</p>
				<h6 class="clearfix"></h6>
			</li>
			<li>
				<p>2018-03-06<br>13:54</p>
				<p>某某某支付69元已到账</p>
				<h6 class="clearfix"></h6>
			</li>
		</ul>
	</div>
	<!-- 底部内容 -->

</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>
<script>

</script>
</html>
